<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>基于Flexbox的布局</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        :root{
            --header-height:48px;
            --header-background:seashell;
            --footer-height:32px;
            --footer-background:blanchedalmond;
            --main-background:sandybrown;
        }
        div{
            margin: 0;
            padding: 0;
            border: 0;
        }
        html{
            height: 100%;
        }
        header, main, footer{
            display: flex;
            display: -webkit-flex;
            flex-direction: row;
        }
        header, footer{
            align-items: center;
        }
        footer{
            justify-content: center;
        }
        body{
            margin:0;
            display: flex;
            display: -webkit-flex;
            flex-direction: column;
            height: 100%;
            width:100%;
        }
        header{
            height: var(--header-height);
            background: var(--header-background);
        }
        main{
            background: var(--main-background);
            flex-grow: 1;
        }
        footer{
            background: var(--footer-background);
            height: var(--footer-height);
            justify-content: center;
        }
        .yyflexcol{
            display: flex;
            flex-direction: column;
        }
        .yylogo{
            flex-shrink: 0.9;
            flex-grow: 0.9;
        }
        .yylogoedge{
            height: 5px;
        }
        #pane1{
            flex: 1;
            background: saddlebrown;
           
        }
        #pane2{
            flex: 1;
            background: yellowgreen;
            
        }
        #workspace{
            flex: 10;
            background: wheat;
            
        }
    </style>
</head>
<body>
    <header><embed height="90%" src="../../../../assets/svg/qklogo.svg" />标题</header>
    <main>
        <div id='pane1'>s</div>
        <div id='workspace'>p</div>
        <div id='pane2'>2</div></main>
    <footer><small>桥康智能科技有限公司</small></footer>
</body>
</html>